import { observer } from 'mobx-react-lite';
import { Button } from 'esy-ui';
import { BgImg, Header, Img } from '@/components';
import QuickNav from '../quick-nav';
import { useGlobalStore, useUserInfoStore } from '@/mobx';
import { useFormatText } from '@/hooks';
import png01 from '@/assets/images/common/check_wallet_icon.png';
import png02 from '@/assets/images/common/member_money_icon.png';
import gif01 from '@/assets/images/common/hot.gif';
import { postBalance, postRecycleBalance } from '@/services';
import { nameSuffix } from '@/constants';

function AmountTrans() {
  const { balance, userInfo, updateBalance } = useUserInfoStore();
  const { text } = useFormatText();
  const { changeState } = useGlobalStore();

  // 一键划转余额
  const onBackAcount = () => {
    changeState('isLoading', true);
    postRecycleBalance({})
      .then(() => {
        // 更新用户余额
        postBalance({})
          .then((res: any) => {
            updateBalance(res?.Data);
          })
          .catch(() => {});
      })
      .catch(() => {})
      .finally(() => {
        changeState('isLoading', false);
      });
  };

  return (
    <div className='bg-white h-full flex flex-col'>
      <Header title='text_30' isGoHome />
      <QuickNav />
      <div className='flex items-center justify-between text-xs text-desc py-2 px-3 shadow'>
        <div>
          {userInfo.NickName}
          {nameSuffix}
        </div>
        <div>{balance} RMB</div>
      </div>
      <div className='px-6'>
        <div className='text-sm font-bold text-color-17 py-6'>{text('text_185')}</div>
        <div className='flex items-center font-bold text-color-21'>
          <BgImg className='w-[1.5625rem] h-[1.5625rem]' url={png01} />
          <span className='mx-2'>{text('text_186')}</span>
          <Img className='h-4' src={gif01} />
        </div>
        <div className='text-xs text-desc py-6'>{text('text_187')}</div>
        <div className='rounded border border-solid border-bdr-1 p-2.5 bg-body'>
          <div className='text-black text-xl font-bold'>{text('text_181')}</div>
          <div className='flex justify-end px-2.5 mt-2'>
            <div className='flex items-center'>
              <Img className='h-4' src={png02} />
              <div className='text-xl ml-2 text-color-17'>{balance}</div>
            </div>
          </div>
        </div>
        <Button className='rounded mt-10' onClick={onBackAcount}>
          {text('text_182')}
        </Button>
      </div>
    </div>
  );
}

export default observer(AmountTrans);
